<template>
  <div class="indexItem">
    <div class="header_box">
      <div class="header_box_left">
        <div class="back" @click="back">
          <i class="el-icon-back"></i><span>返回BI页</span>
        </div>
      </div>
      <div class="header_box_center">
        <div v-for="(item, index) in centerData" :key="index" :class="active == index ? 'active' : ''"
          @click="changeType(index)">{{ item }}</div>
      </div>
      <div class="header_box_right">{{ times }}</div>
    </div>
    <div class="main">
      <proportionOfGoods v-if="active == 0"></proportionOfGoods>
      <semiFinished v-if="active == 1"></semiFinished>
      <proportionOfSalesCategories v-if="active == 2"></proportionOfSalesCategories>
      <salesCustomers v-if="active == 3"></salesCustomers>

    </div>
  </div>
</template>
<script>
import proportionOfGoods from "./proportionOfGoods.vue"
import proportionOfSalesCategories from "./proportionOfSalesCategories.vue"
import salesCustomers from "./salesCustomers.vue"
import semiFinished from "./semiFinished.vue"


export default {
  components: { proportionOfGoods, proportionOfSalesCategories, salesCustomers, semiFinished },
  data() {
    return {
      times: null,
      active: -1,
      centerData: ['商品类别占比', '半成品', '销售品类占比', '销售客户']
    }

  },
  created() {
    this.getTimes();

  },
  mounted() {
    this.active = this.$route.query.active
  },
  methods: {
    back() {
      this.$router.push({ path: "/sales" });
    },
    changeType(index) {
      this.active = index
    },
    getTimes() {
      setInterval(this.getTimesInterval, 1000);
    },
    getTimesInterval() {
      let year = new Date().getFullYear(); //获取当前时间的年份
      let month = new Date().getMonth() + 1; //获取当前时间的月份
      let day = new Date().getDate(); //获取当前时间的天数
      let hours = new Date().getHours(); //获取当前时间的小时
      let minutes = new Date().getMinutes(); //获取当前时间的分数
      let seconds = new Date().getSeconds(); //获取当前时间的秒数
      //当小于 10 的是时候，在前面加 0
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      //拼接格式化当前时间
      this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
  },
  beforeDestroy() {
    if (this.times) {
      (this.getTimesInterval);
    }
  },

}
</script>
<style lang="scss" scoped>
.indexItem {
  background: rgba(242, 244, 252, 1);
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;

  .header_box {
    height: 70px;
    background: #fff;
    display: flex;
    padding: 0 28px;
    box-sizing: border-box;
    align-items: center;
    display: flex;

    .header_box_left {
      display: flex;
      flex-direction: column;
      color: #999;
      width: 15%;

      .back {
        cursor: pointer;
        color: #000;
        font-size: 18px;
        line-height: 28px;
      }

    }

    .header_box_center {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      height: 100%;

      div {
        width: 134px;
        margin: 0 40px;
        text-align: center;
        line-height: 70px;
        cursor: pointer;
      }

      .active {
        line-height: 65px;
        border-top: 5px solid rgba(0, 80, 250, 1);
        font-weight: bold;
        background: linear-gradient(180deg, rgba(0, 80, 250, 0.3) 2%, rgba(80, 135, 135, 0) 100%);
      }
    }

    .header_box_right {
      font-size: 14px;
      line-height: 20px;
      color: #333;
      width: 15%;
      text-align: right;
    }
  }

  .main {
    margin: 20px 22px;
    flex-grow: 1;
    overflow: hidden;
  }
}
</style>
